<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/themes/admin/assets/css/layui.css">
</head>
<body>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>创建时间</th>
        <th>管理</th>
    </tr>
    </thead>
    <tbody>
    {volist name="category" id ="vo"}
    <tr>
        <td>{$vo.id}</td>
        <td>{$vo.category_name}</td>
        <td>{$vo.create_time|date="Y-m-d",###}</td>
        <td>
            <div class="layui-btn-group">
                <button onclick="editCategory('{$vo.id}','{$vo.category_name}')" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                <button onclick="deleteCategory('{$vo.id}','{$vo.category_name}')" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </td>
    </tr>
    {/volist}
    <tr>
        <td></td>
        <td><input type="text" id="categoryName" placeholder="分类名称"  class="layui-input"></td>
        <td></td>
        <td><button onclick="addCategory()" class="layui-btn layui-btn-normal">添加</button></td>
    </tr>
    </tbody>
</table>
<script src="/themes/admin/assets/layui.js"></script>
<script src="/themes/admin/assets/jquery-3.2.1.min.js"></script>
<script>
    layui.use("layer");
    //添加分类
    function addCategory() {
        var categoryName = $("#categoryName").val();
        $.ajax({
            type:"post",
            data:"categoryName=" + categoryName,
            url:"/admin/article/addCategory",
            success:function (e) {
                layer.msg(e.msg,"",function () {
                    location.href = "/admin/article/category";
                })
            }
        });
    }
    //修改分类
   function editCategory(id,name){
       layer.open({
           type: 1,
           skin: 'layui-layer-lan',
           closeBtn: 1,
           anim: 2,
           shadeClose: true,
           content: '<div style="margin: 20px;"> <div class="layui-form-item">\n' +
           '    <label class="layui-form-label">分类名</label>\n' +
           '    <div class="layui-input-inline">\n' +
           '      <input type="text" value="'+name+'" id="categorySaveName" class="layui-input">\n' +
           '    </div>\n' +
           '  </div>' +
           '<div class="layui-form-item">\n' +
           '    <div class="layui-input-block">\n' +
           '      <button class="layui-btn" onclick="saveCategory('+id+')" lay-submit lay-filter="formDemo">保存</button>\n' +
           '      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
           '    </div>\n' +
           '  </div></div>'
       });
   }
   function saveCategory(id){
     var categoryName = $("#categorySaveName").val();
     $.ajax({
         type:"post",
         url:"/admin/article/saveCategory",
         data:"categoryName="+categoryName+"&id=" +id,
         success:function (e) {
             layer.msg(e.msg,"",function () {
                 location.href = "/admin/article/category";
             });
         }
     });
   }
   function deleteCategory(id,name) {
       layer.confirm('确定删除【'+name+'】？', {
           btn: ['删除','取消'] //按钮
       }, function(){
           $.ajax({
               type:"post",
               url:"/admin/article/deleteCategory",
               data:"id=" +id,
               success:function (e) {
                   layer.msg(e.msg,"",function () {
                       location.href = "/admin/article/category";
                   });
               }
           })
       });
   }
</script>
</body>
</html>